<template>
  <div class="box">
    <el-container>
      <el-header class="head">
        <div class="folt">
          <div class="docmes">
            <el-tooltip
              class="item"
              effect="dark"
              content="全屏"
              placement="top-start"
            >
              <i class="el-icon-rank" aria-hidden="true " @click="aray"></i>
            </el-tooltip>
          </div>
          <div class="block">
            <el-avatar :size="50"
              ><img src="@/assets/images/err.jpg" alt=""
            /></el-avatar>
          </div>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ allFrom.company }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <div class="tecl" @click="project">项目地址</div>
              <div class="tecl" @click="close">登出</div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="lieshis ? '60px' : '200px'">
          <div class="slop" @click="hanele">|||</div>
          <el-menu
            :collapse="lieshis"
            :collapse-transition="false"
            background-color="#6088fa"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="utlsa"
            :router="true"
          >
            <el-menu-item
              @click="menu(item.path)"
              v-for="item in router"
              :key="item.username"
              :index="item.path"
            >
              <i :class="item.children[0].meta.icon"></i>
              <span slot="title">{{ item.children[0].meta.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-click="tabCliclRouter"
            @tab-remove="tabRemoveRouter"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="`${item.path}-${item.meta.tagNameRouter}-${item.meta.pageId}`"
              :label="`${item.meta.tagNameRouter}`"
              :name="`${item.path}-${item.meta.tagNameRouter}-${item.meta.pageId}`"
            >
              {{ item.meta.tagNameRouter }}
            </el-tab-pane>
          </el-tabs>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- 退出弹框提示 -->
    <el-dialog title="退出" :visible.sync="dialogVisible" width="30%">
      <span>是否确认退出</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, setItem, removeItem } from "../utils/token";
export default {
  // 组件名称
  name: "home",
  // 组件参数 接收来自父组件的数据
  props: {
    path: {},
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      dialogVisible: false,
      lieshis: false,
      editableTabsValue: "",
      editableTabs: [],
      allFrom: [],
      routers: "",
      urls: "",
      utlsa: "",
      arry: false,
      usespath: [],
    };
  },
  // 计算属性
  computed: {
    router() {
      const routes = this.$router.options.routes.slice(5);
      return routes;
    },
  },
  // 侦听器
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        // 添加tag信息
        this.addRouteTags();
      },
      // 深度观察监听
      deep: true,
    },
  },
  created() {
    this.utlsa = "/home";
    if (this.$route.path == getItem("url")) {
      this.utlsa = getItem("url") + "";
    }
  },
  mounted() {
    // 页面刷新后添加当前路由tabs信息
    this.addRouteTags();
  },
  // 组件方法
  methods: {
    // 添加路由信息 -- 用于渲染tabs -- 同时添加详情带参数等路由界面信息
    addRouteTags() {
      const pageId = `${this.$route.query.id ? this.$route.query.id : ""}`;
      this.editableTabsValue = `${this.$route.path}-${this.$route.meta.title}-${pageId}`;
      // 重复的不添加 -- 匹配路由-名字-id  是否相同
      if (
        this.editableTabs.find(
          (x) =>
            `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` ===
            `${this.$route.path}-${this.$route.meta.title}-${pageId}`
        )
      )
        return;
      // 添加tabs信息
      this.editableTabs.push({
        path: this.$route.path,
        query: this.$route.query,
        meta: {
          tagNameRouter: this.$route.meta.title,
          pageId: pageId,
        },
      });
    },
    // tabs标签页点击
    tabCliclRouter(val) {
      // 匹配正确的路由信息 -- 名字是路由多个唯一参数拼接而成 -- val.name此字段必须确保是唯一的
      const pageRouter = this.editableTabs.find(
        (x) => `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` === val.name
      );
      // 跳转tabs存储的对应路由信息，有参数携带参数
      this.$router.push({ path: pageRouter.path, query: pageRouter.query });
    },
    // tabs标签页移除
    tabRemoveRouter(val) {
      // 删除到第一个时禁止
      if (this.editableTabs.length === 1) return;
      // 找到对应的要删除tabs数据
      const routerFind = this.editableTabs.find(
        (x) => `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` === val,
      );
      // 对要删除的进行去除 -- 找到对应的位置
      const indexPath = this.editableTabs.findIndex(
        (x) =>
          `${x.path}-${x.meta.tagNameRouter}-${x.meta.pageId}` ===
          `${routerFind.path}-${routerFind.meta.tagNameRouter}-${routerFind.meta.pageId}`
      );
      // 根据找到索引进行删除操作
      this.editableTabs.splice(indexPath, 1);
      // 如果删除的是当前高亮的进行特殊处理 -- 使其高亮到前一个上，并跳转到高亮区域的界面
      if (
        `${routerFind.path}-${routerFind.meta.tagNameRouter}-${routerFind.meta.pageId}` ===
        val
      ) {
        // 改变高亮当前绑定值
        this.editableTabsValue = `${
          this.editableTabs[this.editableTabs.length - 1].path
        }-${
          this.editableTabs[this.editableTabs.length - 1].meta.tagNameRouter
        }`;
        // 跳转到当前高亮区域页面
        this.$router.push({
          path: this.editableTabs[this.editableTabs.length - 1].path,
          query: this.editableTabs[this.editableTabs.length - 1].query,
        });
      }
    },
    // 出现确认框
    close() {
      this.dialogVisible = true;
    },
    // 退出登录
    dialog() {
      removeItem("token");
      // removeItemtime('timeKey')
      this.$router.push("/login");
      removeItem("url");
    },
    // 菜单高亮
    menu(url) {
      this.utlsa = url;
      setItem("url", url);
    },
    // 控制菜单伸缩
    hanele() {
      this.lieshis = !this.lieshis;
    },
    // 项目地址跳转
    project() {
      const aTag = document.createElement("a");
      aTag.href = "https://gitee.com/kuxiao-smile/node-nest";
      aTag.target = "_blank";
      aTag.click();
    },
    // 全屏/退出全屏
    aray() {
      if (!this.arry) {
        document.documentElement.requestFullscreen();
        this.arry = true;
      } else {
        document.exitFullscreen();
        this.arry = false;
      }
    },
  },
};
</script> 

<style scoped lang="less">
.box {
  height: 100% !important;
}

.el-menu {
  border: 0px;
}
.el-container {
  height: 100vh;
  background-color: #6088fa;
}

.folt {
  width: 100px;
  margin-right: 30px;
  display: flex;
  align-items: center;
}
.el-icon-rank {
  margin-right: 20px;
}

.el-main {
  height: 100%;
  padding: 10px;
  background-color: #eee;
}

.head {
  padding: 0px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.el-avatar {
  margin-right: 20px;
  height: 40px !important;
  width: 40px !important;
}
.tecl {
  height: 20px;
  width: 80px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}
.el-icon-location:hover {
  color: #6088fa;
}
.el-aside {
  overflow: hidden;
}

.slop {
  text-align: center;
  letter-spacing: 5px;
  background-color: #3061e7;
  cursor: pointer;
}
/deep/.el-submenu__icon-arrow {
  display: none !important;
}
.docmes {
  display: flex;
  vertical-align: middle;
  display: inline-block;
}
::v-deep .el-tabs {
  height: 33px;
  border-bottom: 1px solid #e5e7ed;
  padding-left: 12px;
  .el-tabs__item {
    color: #000;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    border: 1px solid #e5e7ed;
    margin-right: 8px;
  }
  .el-tabs__item.is-active {
    color: #00ab7a;
    background-color: #adebd9;
    opacity: 1;
  }
  .el-tabs__content {
    display: none;
  }
  .el-tabs__item:first-child {
    border-left: 1px solid #e5e7ed;
  }
  .el-tabs__nav {
    border: 0px;
  }
  .el-tabs__nav-scroll {
    background: #fff;
  }
  .el-tabs__nav-prev {
    line-height: 30px;
    .el-icon-arrow-left {
      font-weight: 700;
      color: #000;
    }
  }
  .el-tabs__nav-next {
    line-height: 30px;
    .el-icon-arrow-right {
      font-weight: 700;
      color: #000;
    }
  }
}
</style>